<template>
  <div v-show="isVisible" v-loading="dataLoading" class="container d_main">
    <div class="d_header">
      <div class="d_header_title">
        <div class="back pointer" @click="Back">
          <span class="el-icon-arrow-left"></span>
          <p>返回</p>
        </div>
        <h3>查看工单</h3>
      </div>
      <div class="d_header_btn"></div>
    </div>
    <div class="subTip">
      <dl>
        <dt>单据单号</dt>
        <dd>{{ productFrom.baseData.produceTaskBillNo || "系统自动生成" }}</dd>
      </dl>
      <dl>
        <dt>创建日期</dt>
        <dd>{{ productFrom.baseData.createDate || dayjs().format("YYYY-MM-DD") }}</dd>
      </dl>
      <dl>
        <dt>创建人员</dt>
        <dd>{{ productFrom.baseData.createPersonName || name }}</dd>
      </dl>
    </div>
    <div class="d_mainCenter">
      <el-form
        ref="orderForm"
        label-position="left"
        :model="productFrom"
        :rules="rules"
        label-width="110px"
        class="orderForm"
      >
        <div class="d_left p0">
          <div class="d_orderDetails">
            <div class="item">
              <div class="cTitle">
                <h3>订单信息</h3>
              </div>
              <dl>
                <dt>订单单号</dt>
                <dd>{{ productFrom.orderBaseData.xieYiShuHao || '--' }}</dd>
              </dl>
              <dl>
                <dt>客户单号</dt>
                <dd>{{ productFrom.orderBaseData.customerBillNo || '--'}}</dd>
              </dl>
              <dl>
                <dt>合同号</dt>
                <dd>{{ productFrom.orderBaseData.contractCode || '--'}}</dd>
              </dl>
            </div>
            <div class="item">
              <div class="cTitle">
                <h3>产品信息</h3>
              </div>
              <dl>
                <dt>产品名称</dt>
                <dd>{{ productFrom.orderBaseData.orderProductName || '--' }}</dd>
              </dl>
              <dl>
                <dt>产品板面</dt>
                <dd> {{ productFrom.orderBaseData.printingSurface || '--' }}</dd>
              </dl>
              <dl>
                <dt>产品版本</dt>
                <dd> {{ productFrom.orderBaseData.productVersions || '--' }}</dd>
              </dl>
            </div>
            <div class="item">
              <div class="cTitle">
                <h3>业务信息</h3>
              </div>
              <dl>
                <dt>标签套数</dt>
                <dd>{{ productFrom.orderBaseData.taoZhuangQuantity || '--' }}<span class="unit">{{productFrom.baseData.taoZhuangQuantity == productFrom.baseData.tagSumQuantity?'枚':'套'}}</span></dd>
              </dl>
              <dl>
                <dt>标签枚数</dt>
                <dd>{{ productFrom.orderBaseData.tagSumQuantity || '--' }}<span class="unit">枚</span></dd>
              </dl>
            </div>
            <div class="item">
              <div class="cTitle">
                <h3>数据信息</h3>
              </div>
              <dl>
                <dt>数据来源</dt>
                <dd>{{ productFrom.orderBaseData.dataComeFromName || '--' }}</dd>
              </dl>
              <dl>
                <dt>数据数量</dt>
                <dd>{{ productFrom.orderBaseData.tagDataQuantity || '--' }}</dd>
              </dl>
              <dl>
                <dt>数据状态</dt>
                <dd>{{ productFrom.orderBaseData.dataProduceState || '--' }}</dd>
              </dl>
            </div>
            <div class="item">
              <div class="cTitle">
                <h3>套装关系</h3>
              </div>
              <labelTree :tree-data="productFrom.packageRelations" />
            </div>
            <div class="item">
              <div class="cTitle">
                <h3>产品包装</h3>
              </div>
              <dl>
                <dt>成品样式</dt>
                <dd>{{ productFrom.packageData.productStyleName || '--' }}</dd>
              </dl>
              <dl v-if="productFrom.packageData.productStyle !== 1">
                <dt>出标方向</dt>
                <dd>{{ productFrom.packageData.outDirectionName || '--' }}</dd>
              </dl>
              <dl v-if="productFrom.packageData.productStyle === 2">
                <dt>卷向</dt>
                <dd>{{ productFrom.packageData.scrollDirectionName || '--' }}</dd>
              </dl>
              <dl>
                <dt>贴标方式</dt>
                <dd>{{ productFrom.packageData.tagAffixWayName || '--' }}</dd>
              </dl>
              <dl v-if="productFrom.packageData.productStyle === 2">
                <dt>卷芯大小</dt>
                <dd> {{ productFrom.packageData.mandrelSize || '--' }}<span class="unit">mm</span></dd>
              </dl>
              <dl v-if="productFrom.packageData.productStyle === 2">
                <dt>外直径不超过</dt>
                <dd>{{ productFrom.packageData.notOverDiameter || '--' }}<span class="unit">mm</span></dd>
              </dl>
              <dl v-if="productFrom.packageData.productStyle === 2">
                <dt>每卷等于</dt>
                <dd>{{ productFrom.packageData.pageEqualTags || '--' }}<span class="unit">{{productFrom.baseData.taoZhuangQuantity == productFrom.baseData.tagSumQuantity?'枚':'套'}}</span></dd>
              </dl>
              <dl v-if="productFrom.packageData.productStyle !== 2">
                <dt>每张等于</dt>
                <dd>{{ productFrom.packageData.pageEqualTags || '--' }}<span class="unit">{{productFrom.baseData.taoZhuangQuantity == productFrom.baseData.tagSumQuantity?'枚':'套'}}</span></dd>
              </dl>
              <dl v-if="productFrom.packageData.productStyle !== 2">
                <dt>每包等于</dt>
                <dd>{{ productFrom.packageData.packageEqualPages || '--' }}<span class="unit">张</span></dd>
              </dl>
              <dl>
                <dt>每箱等于</dt>
                <dd>{{ productFrom.packageData.boxEqualPackages || '--' }}<span class="unit">{{ productFrom.packageData.productStyle !== 2 ? "包" : "卷" }}</span></dd>
              </dl>
              <dl>
                <dt>每箱共计</dt>
                <dd>{{ productFrom.packageData.boxEqualTags || '--' }}<span class="unit">{{productFrom.baseData.taoZhuangQuantity == productFrom.baseData.tagSumQuantity?'枚':'套'}}</span></dd>
              </dl>
            </div>
            <div class="item">
              <div class="cTitle">
                <h3>订单备注</h3>
              </div>
              <div class="d_remark">
                {{ productFrom.orderBaseData.orderRemark }}
              </div>
            </div>
            <div class="item">
              <div class="cTitle">
                <h3>其他信息</h3>
              </div>
              <dl>
                <dt>业务员</dt>
                <dd>{{ productFrom.orderBaseData.salesmanName || '--' }}</dd>
              </dl>
              <dl>
                <dt>联系电话</dt>
                <dd>{{ productFrom.orderBaseData.salesmanMobile || '--' }}</dd>
              </dl>
            </div>
          </div>
        </div>
        <div class="d_tag">
          <div class="d_nav d_nav_m">
            <span :class="conIndex === 0 ? 'on' : ''"  @click="selectChange(0)">彩稿信息</span>
            <span :class="conIndex === 1 ? 'on' : ''"  @click="selectChange(1)">标签信息</span>
          </div>
          <div class="d_tag_item" v-show="conIndex === 0">
            <div class="cTitle">
              <h3>彩稿信息</h3>
            </div>
            <div class="coloredDrawing">
              <template v-if="urlList && urlList.length > 0">
                <ul class="list list_2">
                  <li v-for="imgsrc in urlList" :key="imgsrc">
                    <el-image
                      :src="imgsrc"
                      :preview-src-list="srcList"
                      :initial-index="4"
                      fit="cover"
                    >
                      <template #placeholder>
                        <div class="image-slot">
                         <p>图片加载中</p>
                        </div>
                      </template>
                      <template #error>
                        <div class="image-slot">
                          <p>图片加载失败</p>
                        </div>
                      </template>
                    </el-image>
                    <i class="iconfont yulanIco pointer"  @click="previewColor(imgsrc.draftFilePreviewUrl)"/>
                  </li>
                </ul>
              </template>
              <template v-else>
                <el-empty  description="暂无彩稿图" />
              </template>
            </div>
            <div class="cTitle">
              <h3>颜色信息</h3>
            </div>
            <div
              v-for="(item, index) in productFrom.orderTagDataList"
              :key="item.productTagCode"
              class="layerTable"
            >
              <div v-if="index === 0" class="">
                <el-table
                  :data="item.colorDataList"
                  fit
                  style="width: 100%"
                >
                  <el-table-column
                    prop="colorName"
                    label="印刷色"
                    width="100"
                  >
                    <template scope="{row}">
                      {{ row.colorName || "--" }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="colorReferenceName"
                    label="参考"
                    width="100"
                  >
                    <template scope="{row}">
                      {{ row.colorReferenceName || "--" }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="colorRemark"
                    label="备注"
                    width="auto"
                  >
                    <template scope="{row}">
                      {{ row.colorRemark || "--" }}
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
          <div class="d_tag_item" v-show="conIndex === 1">
            <div class="cTitle">
              <h3>标签信息</h3>
            </div>
            <div class="tagCon">
              <LableShow :dataArr="productFrom.orderTagDataList"></LableShow>
            </div>
          </div>
        </div>
        <div class="d_content oh-y">
          <div class="cTitle">
            <h3>拼版信息</h3>
          </div>
          <div>
            <ul class="list list_3">
              <li>
                <el-form-item label="版辊尺寸">
                  {{ productFrom.baseData.makeup_RollSize || "--" }}<span class="unit">mm</span>
                </el-form-item>
              </li>
              <li>
                <el-form-item label="数码板面">
                  {{ productFrom.baseData.makeup_DigitalEdition || "--" }}<span class="unit">mm</span>
                </el-form-item>
              </li>
              <li>
                <el-form-item label="跳距">
                  {{ productFrom.baseData.makeup_SkipDistance || "--" }}<span class="unit">mm</span>
                </el-form-item>
              </li>
              <li>
                <el-form-item label="间距">
                  {{ productFrom.baseData.makeup_SpaceBetween || "--" }}<span class="unit">mm</span>
                </el-form-item>
              </li>
              <li>
                <el-form-item label="拼版">
                  {{ productFrom.baseData.makeup_Combine || "--" }}
                </el-form-item>
              </li>
              <li>
                <el-form-item label="模数">
                  {{ productFrom.baseData.makeup_Modules || "--" }}
                </el-form-item>
              </li>
              <li>
                <el-form-item label="平张断张">
                  {{ productFrom.baseData.makeup_PzDz || "--" }}
                </el-form-item>
              </li>
              <li>
                <el-form-item label="色数">
                  {{ productFrom.baseData.makeup_Colors || "--" }}
                </el-form-item>
              </li>
              <li>
                <el-form-item label="计划成品米数">
                  {{ productFrom.baseData.planCpMeters || "--" }}<span class="unit">米</span>
                </el-form-item>
              </li>
            </ul>
          </div>
          <div class="cTitle">
            <h3>生产工艺</h3>
          </div>
          <!-- 表格区域       -->
          <div class="tableCon">
            <div class="tableDiv">
              <div class="table-column-group">
                <div class="table-column" style="width:76px"></div>
                <div class="table-column" style="width:100px"></div>
                <div class="table-column" style="width:100px"></div>
                <div class="table-column" style="width:110px"></div>
                <div class="table-column" style="width:80px"></div>
                <div class="table-column" ></div>
                <div class="table-column" style="width:38px"></div>
              </div>
              <div class="table-header-group">
                <ul>
                  <li>工艺编号</li>
                  <li>工艺名称</li>
                  <li>工艺设备</li>
                  <li>计划工时</li>
                  <li>标准效率</li>
                  <li>备注</li>
                </ul>
              </div>
              <div class="table-row-group">
                <template v-for="(cl, index) in productFrom.produceCraftList">
                  <ul :key="index">
                    <li>{{ cl.produceCraft.produceCraftNo || "--" }}</li>
                    <li>{{ cl.produceCraft.produceCraftName || "--" }}</li>
                    <li>{{ cl.produceCraft.produceEquipmentName || "--" }}</li>
                    <li>{{ cl.produceCraft.craftTaskPlanUseTime || "--" }}</li>
                    <li>{{ cl.produceCraft.standardEfficiency || "--" }}</li>
                    <li>{{ cl.produceCraft.craftTaskRemark || "--" }}</li>
                  </ul>
                </template>
              </div>
            </div>
          </div>
          <div class="cTitle">
            <h3>生产物料</h3>
          </div>
          <!-- 表格区域       -->
          <div class="tableCon">
            <div class="tableDiv">
              <div class="table-column-group">
                <div class="table-column" style="width:80px"></div>
                <div class="table-column" style="width:160px"></div>
                <div class="table-column" style="width:76px"></div>
                <div class="table-column" style="width:76px"></div>
                <div class="table-column" style="width:76px"></div>
                <div class="table-column" style="width:76px"></div>
                <div class="table-column" style="width:76px"></div>
                <div class="table-column" style="width:110px"></div>
                <div class="table-column" ></div>
                <div class="table-column" style="width:38px"></div>
              </div>
              <div class="table-header-group">
                <ul>
                  <li>物料编号</li>
                  <li>物料名称</li>
                  <li>规格型号</li>
                  <li>物料类型</li>
                  <li>库存数量</li>
                  <li>计划用料</li>
                  <li>打印用料</li>
                  <li>使用工艺</li>
                  <li>备注</li>
                </ul>
              </div>
              <div class="table-row-group">
                <template v-for="(cl, index) in productFrom.produceMaterialList">
                  <ul :key="index">
                    <li>{{ cl.goodsCode }}</li>
                    <li>{{ cl.goodsName }}</li>
                    <li>{{ cl.stockGoodsName }}</li>
                    <li>{{ cl.categoryName }}</li>
                    <li>{{ cl.stockQuantity }}</li>
                    <li>
                      {{ cl.planMaterialQuantity || "--"}}
                    </li>
                    <li>
                      {{ cl.printMaterialQuantity || "--"}}
                    </li>
                    <li>
                      {{ cl.produceCraftName || "--"}}
                    </li>
                    <li>
                      {{ cl.produceMaterialRemark || "--"}}
                    </li>
                  </ul>
                </template>
              </div>
            </div>
          </div>
          <div class="cTitle">
            <h3>生产备注</h3>
          </div>
          <div class="d_remark">
            <el-input
              v-model="productFrom.baseData.produceRemark"
              type="textarea"
              :autosize="{ minRows: 5

                  }"
              placeholder="请输入内容"
              size="mini"
              :disabled="isDisable"
            />
          </div>
        </div>
      </el-form>
    </div>
    <el-image-viewer
      v-show="isShadeShow"
      style="z-index: 5000"
      :initial-index="0"
      :on-close="onCloseviewer"
      :url-list="urlList"
    />
  </div>
</template>
<script>
import labelTree from '@/components/labelTree'
import LableShow from '@/components/lableShow'
import { mapGetters } from 'vuex'
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
  name: '',
  components: { labelTree, ElImageViewer,LableShow },
  props: {
    perVisible: {
      type: Boolean,
      required: false
    },
    productdd: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    isVisible: {
      get() {
        return this.perVisible
      },
      set(val) {
        this.$emit('update:perVisible', val)
      }
    },
    ...mapGetters(['userInfo', 'name']),
    getstandardEfficiency() {
      return function(index) {
        if ((this.productFrom.baseData.planCpMeters === 0 || index === 0)) {
          return 0
        } else {
          return (this.productFrom.baseData.planCpMeters / index * 60).toFixed(0)
        }
      }
    }

  },
  data() {
    return {
      orderInfos: {
        productData: {
          tagDataList: [{}, {}, {}]
        }
      },
      selectArr: [],
      isShadeShow: false,
      urlList: [], // 图片列表
      showViewer: false, // 预览图片
      showOrder: false, // 订单弹窗
      showCraft: false, // 选择工艺
      showMateria: false, // 选择物料
      orderNo: '', // 订单号
      loading: null,
      conIndex: 0,
      tabsIndex: 0, // 右侧tabs切换索引
      tagIndex: 0, // 当前标签索引
      colorOps: 'add', // 印刷颜色当前操作
      colorEditIndex: null, // 印刷颜色修改的索引
      dataLoading: false, // 订单详情数据加载
      orderLoading: false, // 订单保存加载效果
      isAddColor: false, // 印刷颜色新增弹框是否打开

      // 设置时间控件小于当前日期不能选择
      option: {
        disabledDate: (time) => {
          return time.getTime() < Date.now() - 1 * 24 * 3600 * 1000
        }
      },
      productFrom: {
        baseData: {},
        packageData: {},
        orderBaseData: {}
      },
      isDisable: false, // 是否禁用输入框
      typeStatus: 0,
      rules: {
        'productBase.customerName': [
          { required: true, message: '请选择客户', trigger: 'change' }
        ],
        'productBase.productName': [
          {
            required: true,
            message: '请输入产品名称',
            trigger: ['change', 'blur']
          }
        ]
      }
    }
  },

  watch: {
    productdd: {
      deep: true,
      handler(val) {
        console.log(val)
        this.productFrom = val
        this.showColorDrafts()
      }
    }
  },
  created() {
    // this.loading = this.$loading({
    //   lock: true,
    //   text: '数据加载中',
    //   spinner: 'el-icon-loading',
    //   fullscreen: true,
    //   background: 'rgba(0, 0, 0, 0.7)'
    // })
  },
  mounted() {
  },
  methods: {

    selectChange(index) {
      this.conIndex = index
    },
    //

    // 预览彩稿
    previewColor(url) {
      this.isShadeShow = true
      this.colorImagUrl = url
    },
    getName(arr, code) {
      let name = ''
      arr.forEach((e) => {
        if (e.equipmentCode === code) {
          name = e.equipmentName
        }
      })
      return name
    },

    onCloseviewer() {
      this.isShadeShow = false
    },
    showColorDrafts() {
      const parmas = {
        orderNo: this.productFrom.orderBaseData.orderNo
      }
      this.$api.product
        .QueryOrdersColorDrafts(parmas)
        .then((res) => {
          if (res.fileDataList && res.fileDataList.length) {
            const ur = []
            res.fileDataList.forEach((e) => {
              ur.push(e.draftFilePreviewUrl)
            })
            this.$nextTick(() => {
              this.urlList = ur
            })
          }
        })
        .catch(() => {})
    },

    // 控制标签内容层显示隐藏
    shrink(item) {
      this.$set(item, 'isShow', !item.isShow)
    },
    // 返回
    Back() {
      this.isVisible = false
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  position: fixed;
  background: #fafafa;
  top: 0;
  left: 0;
  z-index: 4000;
  height: 100%;
  width: 100%;
}
</style>
